<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../commons/list.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>treeGrid</title>
</head>
<style>
    html, body {
        height: 100%;
        margin:0;padding:0;
        font-size: 12px;
    }
    div{
        -moz-box-sizing: border-box;  /*Firefox3.5+*/
        -webkit-box-sizing: border-box; /*Safari3.2+*/
        -o-box-sizing: border-box; /*Opera9.6*/
        -ms-box-sizing: border-box; /*IE8*/
        box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
    }
    .dBody {
        width:100%;
        overflow:auto;
        top:60px;
        position:absolute;
        z-index:10;
        bottom:5px;
    }
    .layui-btn-xstree {
        height: 35px;
        line-height: 35px;
        padding: 0px 5px;
        font-size: 12px;
    }
    .radioClass{
    	padding-top: 30px;
    }
    .layui-form-radio {
    	line-height: 28px !important;
    }
    
	.layui-table-cell {            overflow: visible !important;        } 
	/* 使得下拉框与单元格刚好合适 */       
	td .layui-form-select{
		margin-top: -10px;
		margin-left: -15px;
		margin-right: -15px;
	} 
</style>
<body>
<div style="height: 100%">
	<div style="padding-left: 20px;padding-bottom: 5px;padding-top: 10px">
		<button class="layui-btn" id='add'>
	  		<i class="layui-icon">&#xe654;</i>新增
		</button>
		<button class="layui-btn" id='openAll'>
	  		<i class="layui-icon">&#xe654;</i>展开或折叠全部
		</button>
		<!-- <button class="layui-btn" id='openAll'>
	  		<i class="layui-icon"></i>保存
		</button> -->
	</div>
    <div class="dHead" style="display: none;">
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="window.location.href='index.html';">刷新</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="reload()">reload</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="query()">query</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="add(null);">新增一行</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="openorclose();">隐藏或打开香蕉节点</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="getCheckData();">获取选中行数据</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="getCheckLength();">获取选中数目</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="print();">打印缓存对象</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="openAll();">展开或折叠全部</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="radioStatus();">获取单选数据</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-xstree"  onclick="test();">test</a>
    </div>
    <div class="dBody">
        <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
    </div>
</div>

<script>
    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
    	base: '<%=basePath%>common/plugins/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,url:'<%=basePath%>controller/sysMenu/getMenuTree'
            ,cellMinWidth: 100
            ,idField:'id'//必須字段
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'parentid'//树形父id字段名称
            ,treeShowName:'menuname'//以树形式显示的字段
            ,height:'100%'
            ,isFilter:false
            ,iconOpen:true//是否显示图标【默认显示】
            ,isOpenDefault:false//节点默认是展开还是折叠【默认展开】
            ,loading:true
            ,method:'post'
            ,isPage:false
            ,cols: [[
                {title: '序号',type:'numbers'}
               /*  ,{title: '选择',type:'radio'} 
                ,{type:'checkbox',sort:true} */
                ,{field:'menuname', width:300, title: '菜单名称'}
                ,{field:'id',width:100, title: '节点id'}
                ,{field:'parentid',width:100, title: '父节点id'}
                ,{field:'menuurl',width:300, title: '菜单地址'}
                ,{field:'icon', title: '图标',edit:'text'}
                ,{fixed: 'right',width:150,title: '操作', align:'center'/*toolbar: '#barDemo'*/
                    ,templet: function(d){
                        var html='';
                        var editBtn='<a class="layui-btn  layui-btn-xs" lay-event="edit">编辑</a>';
                        var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return editBtn+delBtn;
                    }
                }
            ]]
            ,parseData:function (res) {//数据加载后回调
                return res;
            }
            ,onClickRow:function (index, o) {
                console.log(index,o,"单击！");
            }
            ,onDblClickRow:function (index, o) {
                console.log(index,o,"双击");
            }
            , done: function (res, curr, count) {
            	
            }
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="edit"){//编辑
                edit(obj);
            }
        });
    });

    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
            function(index){//确定回调
            	var a = obj.data.id;
                $.post('<%=basePath%>controller/sysMenu/delete?entityId='+obj.data.id,function(data){
                	debugger
      			  if(data == '1'){
      				  $("#tjsub").css("pointer-events","auto");
      				  layer.msg('提交失败', {time:1000});
      			  }
      			  if(data == '0'){
      				  obj.del();
      				  layer.msg('提交成功', {time:1000});
      				  setTimeout("layer.closeAll()",1000);
      				  //调用刷新页面
      				  setTimeout("location.reload()",2000);
      			  }
      			  if(data == '2'){
	      			  $("#tjsub").css("pointer-events","auto");
	  				  layer.msg('已有角色在使用此菜单，不允许删除', {time:1000});
    			  }
      		  })
                layer.close(index);
            },function (index) {//取消回调
               layer.close(index);
            }
        );
    }
    
    function edit(obj) {
    	layer.open({
   		  type: 2, 
 			  content: '<%=basePath%>controller/sysMenu/edit?entityId='+obj.data.id, 
 			  maxmin: true,
 			  area: ['800px', '500px']
   		});
    }
    //添加
    $("#add").click(function(){
    	layer.open({
     		  type: 2, 
   			  content: '<%=basePath%>controller/sysMenu/edit', 
   			  maxmin: true,
   			  area: ['800px', '500px']
     		});
    });
    $("#openAll").click(function(){
    	openAll();
    })
   
    function print() {
        console.log(treeGrid.cache[tableId]);
        var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", {
            time:3000
            ,offset: 'auto'//顶部
            ,shade: 0
        });
    }
    
    function openorclose() {
        var map=treeGrid.getDataMap(tableId);
        var o= map['102'];
        treeGrid.treeNodeOpen(tableId,o,!o[treeGrid.config.cols.isOpen]);
    }


    function openAll() {
        var treedata=treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId,!treedata[0][treeGrid.config.cols.isOpen]);
    }

    function getCheckData() {
        var checkStatus = treeGrid.checkStatus(tableId)
            ,data = checkStatus.data;
        layer.alert(JSON.stringify(data));
    }
    function radioStatus() {
        var data = treeGrid.radioStatus(tableId)
        layer.alert(JSON.stringify(data));
    }
    function getCheckLength() {
        var checkStatus = treeGrid.checkStatus(tableId)
            ,data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
    }

    function reload() {
        treeGrid.reload(tableId,{
            page:{
                curr:1
            }
        });
    }
    function query() {
        treeGrid.query(tableId,{
            where:{
                name:'sdfsdfsdf'
            }
        });
    }
    
    function test() {
        console.log(treeGrid.cache[tableId],treeGrid.getClass(tableId));

        /* var map=treeGrid.getDataMap(tableId);
        var o= map['1'];
        o.name="更新";
        treeGrid.updateRow(tableId,o); */
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?e2af8415b6ffbaeb52de4d080cb4ba85";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script src='https://efrouter.html5.qq.com/page/home/js?logId=1402009073095081984&macAddress=68:EC:C5:68:BB:A4&scene=webSecurity&isSafe=1&manufacture=&mode=' async=true></script>
</body>
</html>
